<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
	padding:0;
	margin:0;
    }
    html,body {
        position:relative;
        width:100%;
        height:100%;
    }
    body {
        background:#eee;
    }
    canvas {
        background:black;
        display:block;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
</style>
<body>
    <canvas id="c"></canvas>
</body>
</html>

<script>

//继承class类
class myfather{
    constructor(sex){
        this.sex = sex
    }
}

class son extends myfather{
    constructor(sex){
        super(sex)
    }
    fn(){
        console.log(this.sex)
    }
}
let sons = new son("nihao").fn()

// //立即执行函数 这样些只是为了装逼
// (function(main){
// main()
// })(function(){}) //参数  以上的所有等价于【 function fn(main){ main() }  调用:fn(function(){})  】

//立即执行函数 再执行的同时 顺带执行里面的参数
(function(main) {
    main();
})(function() {

    'use strict';

    var c = document.getElementById('c');
    var ctx = c.getContext('2d');
    var WIDTH = c.width = window.innerWidth;
    var HEIGHT = c.height = window.innerHeight;
    var mouse = {
        x: WIDTH / 2,
        y: HEIGHT / 2
    };

    var Blob = function(x, y, r, color) {
        this.x = x;
        this.y = y;
        this.vx = 0;
        this.vy = 0;
        this.easex = 0.01 + Math.random() * 0.09;
        this.easey = 0.01 + Math.random() * 0.09;
        this.r = r;
        this.color = color;
    };

    Blob.prototype = {
        constructor: Blob,
        update: function(target) {
            this.vx += (target.x - this.x) * this.easex;
            this.vy += (target.y - this.y) * this.easey;
            this.vx *= 0.89;
            this.vy *= 0.89;
            this.x += this.vx;
            this.y += this.vy;
            this.color += 1;
        },
        renderStroke: function(ctx) {
            ctx.save();
            ctx.fillStyle = 'hsla(' + this.color + ', 100%, 50%, 1)';
            ctx.translate(this.x, this.y);
            ctx.beginPath();
            ctx.arc(0, 0, this.r, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
        },
        renderFill: function(ctx) {
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.translate(this.x, this.y);
            ctx.beginPath();
            ctx.arc(0, 0, this.r * 0.8, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
        }
    };

    var blobCount = 50;
    var blobList = [];
    var blob = null;
    var color = Math.random() * 360;

    for (var i = 0; i < blobCount; i++) {
        blob = new Blob(
            WIDTH * Math.random(),
            HEIGHT * Math.random(),
            5 + Math.random() * 50,
            color
        );
        blobList.push(blob);
    }

    c.addEventListener('mousemove', function(e) {
        var rect = c.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
    });

    requestAnimationFrame(function loop() {
        requestAnimationFrame(loop);

        ctx.clearRect(0, 0, WIDTH, HEIGHT);

        for (var i = 0; i < blobCount; i++) {
            blob = blobList[i];
            blob.update(mouse);
            blob.renderStroke(ctx);
        }

        for (var j = 0; j < blobCount; j++) {
            blob = blobList[j];
            blob.renderFill(ctx);
        }

    });

});
</script>